<template>
  <div class="loginBox">
    <div class="login_panel">
      <Logo />

      <el-form
        label-width="80px"
        :model="loginForm"
        :rules="rules"
        labelPosition="top"
        ref="loginForm"
      >
        <el-form-item prop="account">
          <el-input
            prefix-icon="el-icon-user-solid"
            v-model="loginForm.account"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            prefix-icon="el-icon-lock"
            :type="type == 'open' ? 'password' : 'text'"
            v-model="loginForm.password"
          >
            <i
              slot="suffix"
              class="el-input__icon"
              :class="{
                'el-icon-view': type == 'open',
                'el-icon-close': type == 'close',
              }"
              @click="changeShow"
            ></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Logo from "@/components/Logo.vue";
import { $_login } from "@/api/user";
import { renderMenu } from "@/router/index";

export default {
  data() {
    return {
      type: "open",
      loginForm: {
        account: "",
        password: "",
      },
      rules: {
        account: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    changeShow() {
      this.type = this.type == "open" ? "close" : "open";
    },
    submit() {
      console.log(this.loginForm);
      // vue-router
      // 判断一下表单是否通过了验证
      // 如果通过了验证，那么跳转
      // 如果没通过验证，那么啥事都不用做

      // 先拿到这个表单
      this.$refs.loginForm.validate((validate) => {
        // a 表单所有验证是否通过
        // b 代表到底哪一项没通过
        if (validate) {
          $_login(this.loginForm).then((res) => {
            console.log(90, res);
            if (res.data.code == 0) {
              this.$message({
                message: res.data.msg,
                type: "success",
              });
              localStorage.setItem("token", res.data.token);
              // 把这个账号的角色信息存储
              localStorage.setItem("role", res.data.role);

              renderMenu();
              this.$router.push("/Home/Home");
            } else {
              this.$message({
                message: res.data.msg,
                type: "error",
              });
            }
          });
        }
      });
    },
  },
  components: {
    Logo,
  },
  mounted() {
    localStorage.removeItem("asyncList");
    localStorage.removeItem("role");
  },
};
</script>

<style lang="less" scoped>
.loginBox {
  height: 100%;
  background-image: url("https://static.zhihu.com/heifetz/assets/sign_bg.47eec442.png");
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  .login_panel {
    width: 400px;
    height: 300px;
    background: rgba(0, 0, 0, 0.7);
    padding: 20px;
    .el-input {
      /deep/ .el-input__inner {
        background-color: transparent;
        color: white;
      }
    }
    .el-button {
      width: 100%;
    }
  }
}
</style>